import React, { useEffect, Fragment } from 'react';
import { Card, Descriptions } from 'antd';
import Zmage from 'react-zmage';
import StudentsList from './StudentsList';
import BatchesList from './BatchesList';

function ClasesDetail({ match }: any) {
  const clasesData = JSON.parse(sessionStorage.getItem('clasesData') || '');
  const { id } = match.params;

  useEffect(() => {}, []);
  return (
    <Fragment>
      <Card title="班级详情">
        <Descriptions>
          <Descriptions.Item label="班级名称">{clasesData.name}</Descriptions.Item>
          <Descriptions.Item label="年级">
            {clasesData.grade && clasesData.grade.name}
          </Descriptions.Item>
          <Descriptions.Item label="班主任">
            {clasesData.teacher && clasesData.teacher.name}
          </Descriptions.Item>
          <Descriptions.Item label="状态">{clasesData.status ? '开启' : '关闭'}</Descriptions.Item>
          <Descriptions.Item label="教师">
            {clasesData.teachers.map((item: any) => `${item.name}，`)}
          </Descriptions.Item>
          <Descriptions.Item label="二维码">
            {clasesData.image && (
              <Zmage style={{ width: 150, height: 150 }} src={clasesData.image.url} />
            )}
          </Descriptions.Item>
        </Descriptions>
      </Card>
      <Card className="pageCard" title="学生列表">
        <StudentsList id={id} />
      </Card>
      <Card className="pageCard" title="违纪列表">
        <BatchesList id={id} />
      </Card>
    </Fragment>
  );
}

export default ClasesDetail;
